<template>
  <van-tabs
      v-model:active="active"
      class="nav"
      animated
      line-width="20"
      title-active-color="444444"
      title-inactive-color="686868"
      @click-tab="onClickTab"
  >
    <van-tab v-for="item in nav" :title="item">
      <van-pull-refresh
          v-model="loading"
          success-text="刷新成功"
          @refresh="onRefresh(item)"
      >
        <component :is="selectComponent"/>
      </van-pull-refresh>
    </van-tab>
  </van-tabs>
</template>

<script setup lang="ts">

interface Iclick_tab {
  name:number,
  title:string,
  event:MouseEvent,
  disabled:boolean
}




import {defineAsyncComponent,AsyncComponentOptions, ref,shallowRef} from 'vue'
import Loading from '../Loading/index.vue'
import Empty from '../Empty/index.vue'

// tab 的初始位置
const active = ref(0)
const nav = ['推荐','百货','食品','个护','文教','玩具','配饰','游戏','数码']

//获取异步组件
function getAsyncComponent(address:string){
  return defineAsyncComponent({
    loader:()=>import(address),
    loadingComponent:Loading,
    timeout:3000,
    errorComponent:Empty
  })

}
const Recommend = getAsyncComponent('./Recommend/index.vue')
const Groceries = getAsyncComponent('./Groceries/index.vue')
const Food = getAsyncComponent('./Food/index.vue')
const Nursing = getAsyncComponent('./Nursing/index.vue')
const Education = getAsyncComponent('./Education/index.vue')
const Toys = getAsyncComponent('./Toys/index.vue')
const Jewelry = getAsyncComponent('./Jewelry/index.vue')
const Game = getAsyncComponent('./Game/index.vue')
const Digital = getAsyncComponent('./Digital/index.vue')


const components = [Recommend,Groceries,Food,Nursing,Education,Toys,Jewelry,Game,Digital]

const selectComponent = shallowRef(components[0])

//点击可以的到一个值 他的 name 属性是当前 tab 的坐标
function onClickTab(value:Iclick_tab) {
  console.log(value)
  selectComponent.value = components[value.name]
}



const loading = ref(false)
const onRefresh = (value:string) => {
  console.log(value)
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};
</script>

<style scoped lang="scss">
.nav{
  ::v-deep .van-tab__text{
    font: {
      weight: 600;
      size: 0.37333rem;
    }
  }
  ::v-deep .van-tab--active>.van-tab__text{
    font: {
      weight: 700;
      size: 20px;
    }
    transition: all .3s;
  }


}

</style>